<template>
  <div>
    <h2>{{ radarTitle }}</h2>
    <div class="text">
      根据你的红心收藏为你推荐更多的宝藏歌曲
      <el-button
        type="info"
        icon="el-icon-arrow-left"
        circle
        size="mini"
        v-remove-Focus
        :disabled="positionX == '0'"
        @click="controlPosition(-2)"
      ></el-button>
      <el-button
        type="info"
        icon="el-icon-arrow-right"
        circle
        size="mini"
        v-remove-Focus
        :disabled="disable"
        @click="controlPosition(2)"
      ></el-button>
    </div>

    <div class="RadarBox">
      <div
        class="radarItem"
        v-for="item in radarList"
        :key="item.id"
        @dblclick="toSonglistPage(item.id)"
      >
        <el-image
          style="width: 160px; height: 160px"
          :src="item.picUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ item.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <h2>音乐点亮夜晚</h2>
    <div class="MusicBox">
      <div
        v-for="item in musicList"
        :key="item.id"
        @dblclick="toSonglistPage(item.id)"
      >
        <el-image
          style="width: 160px; height: 160px"
          :src="item.picUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ item.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 雷达歌单
      radarList: [],
      // 用户的雷达歌单标题
      radarTitle: '歌单雷达',
      // 精品歌单列表
      musicList: [],
      // 位移矢量
      positionX: 0,
      // 按钮是否禁用
      disable: false,
    }
  },
  computed: {
    ...mapState(['userId']),
  },
  created() {
    this.getMusicLists()
    this.getRadarList()
    this.keepRouterHighlight()
  },
  watch: {
    userId: function (newVal, oldVal) {
      this.getRadarList()
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeSonglistId',
      'changeMusicPlayInfo',
      'changeTheDetailUserId',
    ]),

    // 获取雷达歌单列表
    async getRadarList() {
      if (typeof this.userId == 'number') {
        const { data: res } = await this.$http({
          url: `/homepage/block/page`,
          withCredentials: true, //关键
        })
        // console.log(res)

        // 提取相关信息
        this.radarTitle = res.data.blocks[3].uiElement.subTitle.title
        let tmepListDatas = []

        res.data.blocks[3].creatives.map((item) => {
          let listObj = {}

          listObj.id = item.resources[0].resourceId
          listObj.name = item.resources[0].uiElement.mainTitle.title
          listObj.picUrl = item.resources[0].uiElement.image.imageUrl
          listObj.playCount = item.resources[0].resourceExtInfo.playCount

          return tmepListDatas.push(listObj)
        })
        // 凑数的数据
        res.data.blocks[1].creatives.map((item) => {
          let listObj = {}

          listObj.id = item.resources[0].resourceId
          listObj.name = item.resources[0].uiElement.mainTitle.title
          listObj.picUrl = item.resources[0].uiElement.image.imageUrl
          listObj.playCount = item.resources[0].resourceExtInfo.playCount

          return tmepListDatas.push(listObj)
        })

        this.radarList = tmepListDatas
        // console.log(tmepListDatas)
        return
      }

      // 为了整齐获取其他歌单加入其中
      const { data: res } = await this.$http({
        url: `/personalized?limit=10`,
        withCredentials: true, //关键
      })
      // 提取相关信息
      let tmepListDatas = []
      res.result.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.playCount = item.playCount

        return tmepListDatas.push(listObj)
      })
      this.radarList = tmepListDatas

      if (!window.sessionStorage.getItem('token')) {
        return this.$message.warning('请登录查看专属雷达歌单！')
      }
    },
    // 获取歌单
    async getMusicLists() {
      const { data: res } = await this.$http({
        url: `/personalized?limit=20`,
        withCredentials: true, //关键
      })
      // console.log(res)

      // 提取相关信息
      let tmepListDatas = []
      res.result.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.playCount = item.playCount

        return tmepListDatas.push(listObj)
      })

      this.musicList = tmepListDatas
    },
    // 控制雷达歌单的显示项
    controlPosition(vector) {
      this.positionX = vector + this.positionX

      const el = document.getElementsByClassName('radarItem')
      const unitVector = el[0].offsetWidth
      let maxVector = unitVector * (el.length - 5)
      let moveVector = unitVector * this.positionX

      if (moveVector >= maxVector) {
        moveVector = maxVector
      }

      for (let i = 0; i < el.length; i++) {
        el[i].style.right = moveVector + 'px'
      }

      if (maxVector == moveVector) {
        this.disable = true
      } else {
        this.disable = false
      }
    },
    // 传递 歌单数据，并跳转到歌单页面
    toSonglistPage(songlistId) {
      const info = {
        path: '/view/songlist',
        isActive: songlistId,
        songlistId: songlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeSonglistId(info.songlistId)

      this.$emit('getSonglistId')
    },
    // 保持状态栏高亮
    keepRouterHighlight() {
      const active = '2'
      this.$emit('keepRouterHighlight', active)
    },
  },
}
</script>

<style lang="less" scoped>
h2 {
  margin: 20px 0 5px 0;
}
.text {
  font-size: 14px;
  color: #9f9f9f;
  // position: relative;
  > .el-button {
    position: relative;
    left: 560px;
    background-color: #f5f5f5;
    border: 0;
    color: black;
  }
  > .el-button:hover {
    background-color: #d7d7d7;
  }
}

.RadarBox {
  display: flex;
  padding-top: 12px;
  overflow: hidden;
  position: relative;

  > div {
    padding: 0px 12px 20px 12px;
    position: relative;
    right: 0;
    transition: 1s;
    cursor: pointer;
    .el-image {
      border-radius: 6px;
    }
    > .playCount {
      position: absolute;
      right: 17px;
      top: 2px;
      color: white;
      font-size: 13.6px;
    }
    > .play {
      position: absolute;
      right: 22px;
      bottom: 76px;
      border-radius: 50%;
      width: 32px;
      height: 31px;
      background-color: white;
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 28px;
        color: #ec4141;
        position: relative;
        left: 3px;
        top: 1px;
      }
    }
    > .name {
      width: 160px;
      font-size: 15px;
      padding-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      //将对象作为弹性伸缩盒子模型显示。
      display: -webkit-box;
      //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-box-orient: vertical;
      //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      -webkit-line-clamp: 2;
    }
  }
  > div:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
}

.MusicBox {
  display: flex;
  flex-wrap: wrap;
  padding-top: 12px;
  > div {
    padding: 0px 12px 20px 12px;
    position: relative;
    cursor: pointer;
    .el-image {
      border-radius: 6px;
    }
    > .playCount {
      position: absolute;
      right: 17px;
      top: 2px;
      color: white;
      font-size: 13.6px;
    }
    > .play {
      position: absolute;
      right: 22px;
      bottom: 76px;
      border-radius: 50%;
      width: 32px;
      height: 31px;
      background-color: white;
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 28px;
        color: #ec4141;
        position: relative;
        left: 3px;
        top: 1px;
      }
    }
    > .name {
      width: 160px;
      font-size: 15px;
      padding-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      //将对象作为弹性伸缩盒子模型显示。
      display: -webkit-box;
      //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-box-orient: vertical;
      //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      -webkit-line-clamp: 2;
    }
  }
  > div:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
}
</style>